<!--  -->
<template>
    <div>
        <el-row class="login-page">
            <el-col :span="12" class="bg"></el-col>
            <el-col :span="6" :offset="3" class="form">
                <!-- 注册相关表单 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" size="large" autocomplete="off"
                    v-if="isRegister">
                    <el-form-item>
                        <h1>注册</h1>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="repassword">
                        <el-input v-model="ruleForm.repassword" type="password" placeholder="请输入再次密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="userRegister(ruleFormRef)" class="button" type="primary" auto-insert-space>
                            注册
                        </el-button>
                    </el-form-item>
                    <el-form-item class="flex">
                        <el-link type="info" :underline="false" @click="isRegister = false">
                            ← 返回
                        </el-link>
                    </el-form-item>
                </el-form>
                <!-- 登录相关表单 -->
                <el-form v-else :model="ruleForm" :rules="rules" ref="ruleFormRef" size="large" autocomplete="off">
                    <el-form-item>
                        <h1>登录</h1>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" name="password" type="password"
                            placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item class="flex">
                        <div class="flex">
                            <el-checkbox v-model="checked" @change="checkedFun">记住我</el-checkbox>
                            <el-link type="primary" :underline="false" @click="isRegister = true">没有账号？</el-link>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="userLogin(ruleFormRef)" class="button" type="primary"
                            auto-insert-space>登录</el-button>
                    </el-form-item>
                    <el-form-item class="flex">
                        <el-link type="info" :underline="false" @click="isRegister = true">
                            注册 →
                        </el-link>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import router from '../router'
import { userStore } from '../store'
const ruleFormRef = ref<FormInstance>()
// 是否注册
const isRegister = ref(false)
// 是否记住密码
const checked = ref(false)
// 检验规则
const ruleForm = ref({
    username: '',
    password: '',
    repassword: ''
})
const useData = userStore()

// 获取记住我信息
const userLoginDate = useData.userLogin
ruleForm.value.username = userLoginDate.username === '' ? '' : userLoginDate.username
ruleForm.value.password = userLoginDate.password === '' ? '' : userLoginDate.password
checked.value = userLoginDate.checked
// 表单校验方法
// 验证账号
const validateName = (_: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('用户名不能为空'))
    } else {
        callback()
    }
}
// 验证密码
const validatePwd = (_: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        callback()
    }
}
// 验证确认密码
const validateRePwd = (_: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('确认密码不能为空'))
    } else if (value !== ruleForm.value.password) {
        callback(new Error('两次密码不一致'))
    } else {
        callback()
    }
}

//验证对象
const rules = ref<FormRules<typeof ruleForm>>({
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePwd, trigger: 'blur' }],
    repassword: [{ validator: validateRePwd, trigger: 'blur' }]
})
// 登录方法
const userLogin = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            useData.setToken('testToken');
            useData.setData({
                username: "testData",
                name: "testData"
            })
            //记住我
            if (checked.value) {
                useData.setUserLogin({
                    username: ruleForm.value.username,
                    password: ruleForm.value.password,
                    checked: checked.value
                })
            } else {
                useData.removeUserLogin()
            }
            ElMessage.success('登录成功')
            router.push('/index')
            console.log('submit!')
        } else {
            ElMessage.error('登录失败')
            return false
        }
    })
}
// 注册方法
const userRegister = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            // 请求注册接口
            //   await reguser(ruleForm.value).then((res:any)=>{
            //     if(res.code===200){
            //       ElMessage.success('注册成功')
            //       isRegister.value=false
            //     }else{
            //       ElMessage.error('注册失败')
            //     }
            //   })
            ElMessage.success('注册成功')
            isRegister.value = false
        } else {
            return false
        }
    })
}
// 
// 切换的时候，重置表单内容
watch(isRegister, () => {
    ruleForm.value = {
        username: '',
        password: '',
        repassword: ''
    }
})
// 记住我事件
const checkedFun = (e: any) => {
    checked.value = e
}
onMounted(() => {
    if (useData.token) {
        router.push('/index')
    }
})
</script>
<style lang='scss' scoped>
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background-image: url('../assets/login.jpg');
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>